var processList = {
	id : 'process-list-panel',
	title : '流程列表',
	layout : 'border',
	closable : true,
//	defaults : {
//		bodyStyle : 'padding:15px'
//	},
	items : {
		region : 'center',
		autoScroll : true,
		border : false,
		contentEl : 'processListCanvas'
	}
};

var processListStore = new Ext.data.Store({
	proxy : new Ext.data.HttpProxy({
		url : 'showProcessList.action?method=showProcessList',
		method : 'post'
	}),
	reader : new Ext.data.JsonReader({
		root : "Process",
		totalProperty : "totalProcess",
		id : "id"
	}, [ {
		name : 'id'
	}, {
		name : 'enName'
	}, {
		name : 'cnName'
	}, {
		name : 'description'
	}, {
		name : 'fileId'
	} ])
});

function showProcessList() {
	// Ext.getDom('processListCanvas').innerHTML = "";
	processListStore
			.load({				
				callback : function(r, options, success) {
					if (success == false) {
						Ext.Msg.alert("系统消息","加载数据失败，无对应数据或者系统出现异常！");
					} else {
						var canvas = document.getElementById('processListCanvas');
						var ctx = canvas.getContext('2d');
						ctx.clearRect(0, 0, canvas.width, canvas.height);
						drawProcessMiniImgList(ctx,processListStore);
						canvas.onclick=onMouseClickProcess;
						
						
//						var cm = new Ext.grid.ColumnModel([
//								new Ext.grid.RowNumberer(), {
//									header : '编号',
//									dataIndex : 'id'
//								}, {
//									header : '名称(中文)',
//									dataIndex : 'cnName'
//								}, {
//									header : '名称(英文)',
//									dataIndex : 'enName'
//								}, {
//									header : '备注',
//									dataIndex : 'description'
//								}
//						]);
						
						
					}
				}
			});
}

var processMiniImg = new Image();//缩略图图片
processMiniImg.src = 'images/MiniPic/process2.png';

var imgWidth=100;	//每个图标占的宽度
var imgHeight=80;	//每行图标占的高度
var column=8;		//每行的图标个数
var margin=15;		//边缘空出的距离

//绘制缩略图列表
function drawProcessMiniImgList(ctx,processListStore) {
	ctx.font = "10pt Arial";
	ctx.textBaseline = "top"; // 设置文字垂直对齐方式
	ctx.textAlign = "center"; // 设置文字水平对齐方式	
	
	for(var i=0;i<processListStore.getCount();i++){
		var record=processListStore.getAt(i);
		ix=(i%column)*imgWidth+margin;
		iy=Math.floor(i/column)*imgHeight+margin;
		ctx.drawImage(processMiniImg,ix,iy,processMiniImg.width,processMiniImg.height);
		ctx.fillText(record.get('cnName'), ix+processMiniImg.width/2,iy+processMiniImg.height);
	}
}

//鼠标单击事件，单击缩略图转到模型详细数据页面
function onMouseClickProcess(event){
	var x=event.layerX-margin;
	var y=event.layerY-margin;
	
	var index=Math.floor(y/imgHeight)*column+Math.floor(x/imgWidth);//点击到的缩略图的索引
	var right=(index%column)*imgWidth+processMiniImg.width;//点击到的缩略图的右边x坐标
	var bottom=Math.floor(index/column)*imgHeight+processMiniImg.height;	//点击到的缩略图的底部的y坐标
	
	if(index>processListStore.getCount()){
		return;
	}else if(x>right || y>bottom){
		return;
	}
	var record=processListStore.getAt(index);
	
	//跳转到具体的模型详细数据页面
	authenticate(record.get('fileId'),'read',function(){
		Ext.getCmp('content-panel').layout.setActiveItem('process-panel');		
		showProcessContent(record.get('id'), record.get('cnName'));
	});	
}